<template>
	<view>
		<view class="top-wrap">
			<view class="top-row flex-jc">
				<view class="text flex-ac" @click="handleClick">
					<view class="name">{{ model.store.storeName }}</view>
					<up-icon name="arrow-down-fill" color="#B98A73" size="10"></up-icon>
				</view>
				<view class="text flex-ac" @click="handleModelClick">
					<view class="name">{{ model.model.modelName }}</view>
					<up-icon name="arrow-down-fill" color="#000" size="10"></up-icon>
				</view>
				<!-- <view class="text flex-ac" @click="model.showDatePopup = true">
					<view class="name">{{ "" }}</view>
					<up-icon name="arrow-down-fill" color="#B98A73" size="10"></up-icon>
				</view> -->
				<view :class="['text', 'flex-ac', model.showSearch ? 'active' : '']">
					<up-search shape="round" @focus="searchFocus" :animation="true" :showAction="false"
						:inputStyle="{ borderRadio: '16rpx' }" placeholder="车牌号"></up-search>
				</view>
			</view>
		</view>
		<view class="goods-list">
			<view v-for="item in list" v-if="list.length">
				<view class="goods-item">
					<view class="title">{{ item.seriesName }} {{ item.modelName }}</view>
					<view class="mt20 flex-jc">
						<view>
							<view> 归属门店：北京市朝阳区望京SOHO</view>
							<view> 关联车辆：苏A625UL</view>
							<view>周中定价（{{ common.formatStr(item.period, '0') }}）：{{
								item.weekdayPrice ?? '-' }}/天</view>
							<view>周末定价（{{ common.formatStr(item.period, '1') }}）：{{ item.weekendPrice ?? '-' }}/天</view>
						</view>
						<view>
							<up-button type="primary" color="#986C5D" shape="circle" plain text="详情"
								@click="toDetail(item)"></up-button>
							<up-button type="primary" color="#9A9A9A" shape="circle" plain text="删除"
								@click="delItem(item)"></up-button>
						</view>
					</view>
				</view>
			</view>
			<view v-else>
				<up-empty mode="list" icon="list" marginTop="100px" text="暂无数据"></up-empty>
			</view>
		</view>
		<up-button type="primary" :hairline="false" color="#B98A73" style="width: 95%;" shape="circle" text="批量区间改价"
			@click="toChangePrice"></up-button>
		<CustomPopup :list="model.storeList" :pro="{ key: 'storeName', value: 'uuid' }" title="门店" ref="storePopupRef"
			@select="handleSelectStore"></CustomPopup>
		<CustomPopup :list="model.modelList" :pro="{ key: 'modelName', value: 'modelUuid' }" title="车型"
			ref="modelPopupRef" @select="handleSelectModel"></CustomPopup>

	</view>
</template>

<script setup>
import {
	reactive,
	ref
} from 'vue';
import { postRequest } from "@/reuqest/request.js";
import CustomPopup from "@/components/custom-popup/index.vue";
import { onMounted } from 'vue';
import { onReachBottom, onShow, onPullDownRefresh } from "@dcloudio/uni-app";
import common from "@/utils/common.js";
const storePopupRef = ref(null)
const modelPopupRef = ref(null)

const model = reactive({
	showStorePopup: false,
	showModelPopup: false,
	showDatePopup: false,
	showSearch: false,
	store: {},
	model: { modelName: "全部车型", modelUuid: "" },
	storeList: [],
	modelList: [],
	pageNum: 1,
	total: 0,
})

const list = ref([])

const toChangePrice = () => {
	uni.navigateTo({
		url: `/pages/priceManage/rangePrice?storeUuid=${model.store.uuid}`
	})
}

onReachBottom(() => {
	console.log("onReachBottom");
	if (list.value.length < model.total) {
		model.pageNum += 1;
		getData(true);
	} else {
		uni.$u.toast("已经到底了");
	}
});

onPullDownRefresh(() => {
	model.pageNum = 1;
	getData();
});

const handleSelectStore = (item) => {
	model.store = item
	getData()
}

const handleSelectModel = (item) => {
	model.model = item
	getData()

}

const handleClick = () => {
	storePopupRef.value?.open()
}

const handleModelClick = () => {
	modelPopupRef.value?.open()
}

const toDetail = (item) => {
	uni.navigateTo({
		url: `/pages/priceManage/goodsDetail?modelUuid=${item.modelUuid}&storeUuid=${model.store.uuid}`
	})
}

const delItem = () => { }

const getData = (push = false) => {
	postRequest("/wx-operation/api/v1/bm/rental/price/config/pageByModel", {
		pageNum: model.pageNum,
		pageSize: 10,
		storeUuid: model.store.uuid,
		modelUuid: model.model.modelUuid,
	}).then(res => {
		if (res.bizCode === "00000") {
			console.log(res.data)
			model.total = res.data?.total || 0;
			if (push) {
				list.value.push(...(res.data?.list || []));
			} else {
				list.value = res.data?.list || [];
			}
		}
	})
}

const getModel = () => {
	postRequest("/wx-operation/api/v1/bm/vehicle/model/page", {
		pageNum: 1,
		pageSize: 2000,
		storeUuid: model.store.uuid,
	}).then(res => {
		if (res.bizCode === "00000") {
			console.log(res.data)
			model.modelList = res.data?.list || [];
		}
	})

}

const getStore = () => {
	postRequest("/wx-operation/api/v1/bm/store/page", {
		pageNum: 1,
		pageSize: 2000,
	}).then(res => {
		if (res.bizCode === "00000") {
			model.storeList = res.data?.list || [];
			model.store = model.storeList[0] || {};
			getModel()
			getData()
		}
	})
}

const searchFocus = () => {
}

onMounted(() => {
	getStore()
})
</script>

<style lang="less" scoped>
.top-wrap {
	background: #fff;

	.top-row {
		position: relative;
		padding: 15rpx 30rpx;
		border-bottom: 2rpx solid #D9D9D9;
		font-size: 20rpx;
		color: #525252;
		font-weight: 400;
		line-height: 50rpx;

		&:nth-child(1) {
			gap: 20rpx;
		}

		&:nth-child(2) {
			line-height: 39rpx;
		}

		.text {
			width: 24%;
			font-size: 24rpx;
			font-weight: 500;
			color: #000;

			.name {
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				width: 95%;
			}

			&:nth-child(1),
			&:nth-child(3) {
				color: #B98A73;
			}

			&:nth-child(3) {
				width: 50%;
				transition: all 0.3s;

				&.active {
					width: 95%;
					position: absolute;

				}
			}
		}
	}
}

.goods-list {
	height: calc(100vh - 210rpx);
	overflow-y: scroll;
	background: #fff;
	box-sizing: border-box;
	position: relative;
	padding: 20rpx;

	.goods-item {
		border-radius: 20rpx;
		font-size: 20rpx;
		box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.06);
		padding: 20rpx;
		margin-bottom: 20rpx;

		&>view {
			line-height: 34rpx;
		}

		.title {
			font-size: 24rpx;
			font-weight: bold;
		}

		button {
			margin-bottom: 16rpx;
			width: 180rpx;
			height: 35px;
		}
	}
}
</style>